<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  export default {
    props: {
      list: Array,
      top: {
        type: Number,
        default: 0
      },
      bottom: {
        type: Number,
        default: 0
      },
      click: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      initScroll() {
        this.$refs.wrapper.style.top = this.top + 'px'
        this.$refs.wrapper.style.bottom = this.bottom + 'px'
        //click默认为false 需要设置成true
        this.scroll = new BScroll(this.$refs.wrapper,{
          click: this.click
        })
      },
      refresh() {
      	this.scroll && this.scroll.refresh()
      }
    },
    mounted() {
      this.initScroll()
    },
    watch: {
      list() {
        this.$nextTick(() => {
          this.refresh()
        })
      }
    }
  }
</script>

<style>
  /* 固定样式 */
  .wrapper {
  	position: absolute;
  	overflow: hidden;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  }
</style>
